<template>
	<view class="addAddress">
		<form @submit="formSubmit" @reset="formReset">
			<view class="ipt">
				<view class="title">收件人</view>
				<input class="uni-input" :value="name" name="name" placeholder="请输入收件人姓名" />
			</view>
			<view class="ipt">
				<view class="title">电话号码</view>
				<input class="uni-input" name="tel" :value="tel" placeholder="请输入收件人电话号码" />
			</view>
			<view class="ipt">
				<view class="title">所在地区</view>
				<view class="content_list_content">
					<text @click="showMulLinkageThreePicker">{{address ? address : '请选择地址'}}</text>
					<mpvue-picker
						ref="mpvuePicker"
					></mpvue-picker>
					<mpvue-city-picker
						:themeColor="themeColor"
						ref="mpvueCityPicker"
						@onCancel="onCancel"
						@onConfirm="onConfirm"
					></mpvue-city-picker>
				</view>
			</view>
			<view class="ipt">
				<view class="title">详细地址</view>
				<input name="cityBak" :value="cityBak" placeholder="输入详细地址" />
			</view>
			<view class="ipt isAdd">
				<view class="title">设为默认地址</view>
				<view><switch name="isUse" color="#354E44" :checked="isUse"/></view>
			</view>
			<view class="btns">
				<button form-type="submit" class="btn">{{ type == 'add' ? '保存地址' : '修改地址' }}</button>
				<button type="default" class="btn del" @tap="delAddress" v-if="type == 'edit'">删除地址</button>
			</view>
		</form>
	</view>
</template>

<script>
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import cityData from '@/common/city.data.js';
import { save,setOne } from '@/utils/address/index.js';
import { detail } from '@/utils/address/detail/index.js';
import { update } from '@/utils/address/updata/index.js';
import { del } from '@/utils/address/delAddress/index.js';
import WxValidate from "@/utils/WxValidate";
export default {
	data() {
		return {
			addressShow: false,
			address: '',
			provinceStr: '',
			cityStr: '',
			areaStr: '',
			cityCode: '',
			tel: '',
			name: '',
			isUse: false,
			cityBak: '',
			id: '',
			themeColor: '#007AFF',
			type: 'add'
		};
	},
	methods: {
		showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show();
		},
		onConfirm(e) {
			this.pickerText = JSON.stringify(e);
			console.log(e);
			console.log(this.pickerText);
			this.address = e.label.toString();
			let location = e.label.split('-');
			this.provinceStr = location[0];
			this.cityStr = location[1];
			this.areaStr = location[2];
			this.cityCode = e.cityCode;
			this.region_arr = e.value.toString();
		},
		onCancel () {},
	async	formSubmit (e) {
			console.log(e);
			let obj = e.detail.value;
			let data;
			if (!this.WxValidate.checkForm(obj)) {
			  //表单元素验证不通过，此处给出相应提示
			    let error = this.WxValidate.errorList[0];
			    switch (error.param) {
			        case "tel":
			          //TODO
								uni.showToast({
									icon: 'none',
									title: '电话号码不能少于11位'
								})
			          break;
			      }
						 return false;
			  } else {
					if (this.type == 'add') {
						obj.isUse = obj.isUse ? 1 : 0;
						obj.userId = uni.getStorageSync('userInfo').id;
						obj.tag = '公司';
						obj.cityCode = this.cityCode;
						obj.provinceStr = this.provinceStr;
						obj.cityStr = this.cityStr;
						obj.areaStr = this.areaStr;
						data = await save(obj);
					} else if (this.type == 'edit') {
						obj.isUse = obj.isUse ? 1 : 0;
						obj.userId = uni.getStorageSync('userInfo').id;
						obj.tag = '公司';
						obj.cityCode = this.cityCode;
						obj.provinceStr = this.provinceStr;
						obj.cityStr = this.cityStr;
						obj.areaStr = this.areaStr;
						obj.region_arr = this.region_arr;
						obj.id = this.id;
						data = await update(obj);
					}
					console.log(data);
					if (data.data.code == 'S') {
						uni.navigateTo({
							url: '../address'
						})
					}
				}
			
		},
		async delAddress () {
			let data = await del({ id: this.id });
			console.log(data);
			if (data.data.code == 'S') {
				uni.showToast({
					title: '删除成功'
				})
				uni.navigateTo({
					url: '../address'
				});
			}
		},
		initValidate() {
		    let rules = {
		      tel: {
		        required: true,
		        maxlength: 11
		      }
		    }
		
		    let message = {
		      tel: {
		        required: '请输入联系电话',
		        maxlength: '名字不能超过11个数字'
		      }
		    }
		    //实例化当前的验证规则和提示消息
		    this.WxValidate = new WxValidate(rules, message);
		  }
	},
	components: {
		// pickerAddress
		mpvuePicker,
		mpvueCityPicker
	},
	onLoad(option) {
		console.log(option);
		this.initValidate();
		if (option.id) {
			this.id = option.id;
			this.type = option.type;
			let data = detail({ id: this.id }).then(res => {
				console.log(res);
				// address: '',
				// provinceStr: '',
				// cityStr: '',
				// areaStr: '',
				// cityCode: '',
				this.provinceStr = res.data.data.provinceStr;
				this.cityStr = res.data.data.cityStr;
				this.areaStr = res.data.data.areaStr;
				this.cityCode = res.data.data.cityCode;
				this.tel = res.data.data.tel;
				this.name = res.data.data.name;
				this.isUse = res.data.data.isUse == '0' ? false : true;
				console.log(this.isUse);
				this.address = res.data.data.provinceStr+ '-' + res.data.data.cityStr+ '-' +
				res.data.data.areaStr;
				this.cityBak = res.data.data.cityBak;
			});
			console.log(data);
		}
	}
};
</script>

<style lang="scss">
.addAddress {
	padding: 0 30rpx 0 20rpx;
	height: 100vh;
	width: 100%;
	background-color: #f1ece7;
	.ipt {
		display: flex;
		height: 100rpx;
		align-items: center;
		.title {
			width: 30%;
		}
	}
	.btns {
		position: absolute;
		left: 50%;
		bottom: 20rpx;
		margin-left: -300rpx;
		width: 600rpx;
		.btn {
			background-color: #354E44;
			color: #fff;
			width: 600rpx;
			height: 80rpx;
			border-radius: 100rpx;
			font-size: 30rpx;
			margin-bottom: 20rpx;
		}
		.del {
			background-color: red;
		}
	}
	.isAdd {
		justify-content: space-between;
	}
}
</style>
